<template>
  <div>
    <div v-if="dialogVisible" class="top-notice">距离系统试用到期还剩{{ diffInDays }}天，请及时联系商务团队</div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="70%"
      center
      custom-class="notice-dialog"
    >
      <div class="notice-dialog-container">
        <div class="notice-dialog-content">
          <div class="content">
            <p class="txt-center font-bold" style="font-size: 22px;">关于美气多“运管服”平台试用到期公告</p>
            <p class="mb-20">公告编号：【MQD_PR_2501】</p>
            <p class="mb-20">尊敬的用户：</p>
            <div class="mb-20">
              <p class="txt-indent">您好！</p>
              <p class="txt-indent">感谢您对本系统的关注与支持。经过一段时间的试用，本系统的试用期即将于<span class="red font-bold">【2025年02月28日】</span>到期。为确保您能够继续使用本系统并享受相关服务，特此公告如下：</p>
            </div>
            <div class="mb-20">
              <p>一、系统试用期结束时间</p>
              <p class="txt-indent">本系统的试用期将于 <span class="red font-bold">【2025年02月28日】</span>正式结束。</p>
            </div>
            <div class="mb-20">
              <p>二、后续使用与服务</p>
              <p class="txt-indent">试用期结束后，如需继续使用本系统，请您按照相关流程进行正式购买，以便获得持续的服务与支持。在正式购买或订阅前，如有任何疑问或需求，请随时联系我们的商务团队，我们将竭诚为您解答和提供支持。</p>
            </div>
            <div class="mb-20">
              <p>三、特别提示</p>
              <p class="txt-indent">请您在试用期结束前尽快完成正式购买手续，以免影响您的正常使用。如有任何关于本系统的问题或建议，请随时与我们联系，我们将不断改进和优化，为您提供更好的服务。</p>
            </div>
            <p class="mb-20 txt-indent">感谢您的理解与支持！我们期待与您携手共创美好未来！</p>
            <p class="mb-20 txt-indent">特此公告。</p>
            <div class="mb-20 txt-right">
              <p>北京美气多网络科技有限公司</p>
              <p>2025年2月</p>
            </div>
            <p class="mb-20">注：本公告最终解释权归【北京美气多网络科技有限公司】所有。</p>
          </div>
        </div>
      </div>
      <img class="close-icon" src="@/assets/notice-dialog-close.png" alt="" @click="dialogVisible = false">
    </el-dialog>
  </div>
</template>

<script>
  import dayjs from 'dayjs'
  export default {
    name: 'NoticeDialog',
    data() {
      return {
        dialogVisible: true,
        diffInDays: '--'
      }
    },
    created() {
      // 假设我们要计算的目标日期是2025年02月28日
      const targetDate = dayjs('2025-02-29')

      // 获取当前日期
      const currentDate = dayjs()

      // 计算目标日期与当前日期之间的差异（天数）
      this.diffInDays = targetDate.diff(currentDate, 'day')
    }
  }
</script>

<style lang="scss" scoped>
/deep/ .notice-dialog {
  border-radius: 20px;
  .el-dialog__header {
    display: none;
  }
  .el-dialog__body {
    height: 90vh;
    padding: 0;
  }
  .notice-dialog-container {
    position: relative;
    width: 100%;
    height: 100%;
    background-image: url(~@/assets/notice-dialog-bg.png);
    background-repeat: no-repeat;
    background-size: 100% 100%;
  }
  .notice-dialog-content {
    height: 100%;
    padding: 90px 60px 40px;
    font-size: 16px;
    font-weight: 400;
    color: #000;
  }
  .content {
    height: 100%;
    overflow-y: auto;
    font-size: 19px;
    line-height: 1.5;
    &::-webkit-scrollbar {
      width: 4px; /*  设置纵轴（y轴）轴滚动条 */
      height: 4px; /*  设置横轴（x轴）轴滚动条 */
    }

    /* 滚动条滑块（里面小方块） */
    &::-webkit-scrollbar-thumb {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 10px;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
    }

    /* 滚动条轨道 */
    &::-webkit-scrollbar-track {
      background: rgba(0, 0, 0, 0.2);
      border-radius: 0;
      box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
    }
  }
  .close-icon {
    position: absolute;
    top: 26px;
    right: 26px;
    cursor: pointer;
  }
}
.top-notice {
  position: fixed;
  top: 15px;
  left: 0;
  z-index: 99999;
  width: 100%;
  font-size: 28px;
  font-weight: bold;
  color: red;
  text-align: center;
}
.txt-center {
  text-align: center;
}
.txt-right {
  text-align: right;
}
.txt-indent {
  text-indent: 2em;
}
.font-bold {
  font-weight: bold;
}
.mb-20 {
  margin-bottom: 20px;
}
.red {
  color: red;
}
</style>
